<template>
  <div class="hotel">
    <div class="container">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>酒店</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.cityName||''}}酒店预订</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索酒店 -->
      <div>
        <Hotelsearch @on-search="handleHotelData" @on-click="handleHotelBtn" />
      </div>
      <!-- 位置信息 -->
      <div>
        <Hotelarea :scenics="scenics" :position="positions" @on-city="positionCity" />
      </div>
      <!-- 筛选酒店 -->
      <div class="list-filter">
        <Hotelfilter @on-select="handleFilter" />
      </div>
      <div
        class="hotel-list"
        v-loading="loading"
        element-loading-spinner="iconfont icon-icon-1"
        element-loading-background="rgba(255, 255, 255, 0.9)"
        v-if="hotellist.length > 0"
      >
        <Hoteldesc :data="hotel" v-for="(hotel,n) in hotellist" :key="n" />
      </div>
      <div style="height:300px;text-align:center;margin-top:20px;" v-else>暂无符合条件的酒店</div>
      <!-- 分页 -->
      <div class="pageination">
        <el-pagination
          small
          layout="prev, pager, next"
          prev-text=" 上一页"
          next-text="下一页 "
          :total="total"
          hide-on-single-page
          @current-change="handleCurrent"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Hotelsearch from "../../components/hotel/Hotelsearch";
import Hotelarea from "../../components/hotel/Hotelarea";
import Hotelfilter from "../../components/hotel/Hotelfilter";
import Hoteldesc from "../../components/hotel/Hoteldesc";
export default {
  components: {
    Hotelsearch,
    Hotelarea,
    Hotelfilter,
    Hoteldesc
  },
  data() {
    return {
      scenics: [],
      data: {
        city: 0
      },
      filterStr: "",
      hotellist: [],
      //定位数组
      positions: [],
      total: 0,
      loading: false
    };
  },
  methods: {
    //点击选项时的数组对象
    handleHotelData(data) {
      // console.log(data);
      if (data.length > 0) {
        this.$route.query.cityName = data[0].name;
        const { scenics, id } = data[0];
        this.scenics = scenics;
        this.data.city = id;
        this.getHotelDetail(this.data);
      }
    },
    //获取城市数组和时间
    handleHotelBtn(data, date) {
      if (date.length > 0) {
        this.data.enterTime = date[0];
        this.data.leftTime = date[1];
      }
      // console.log(this.data);
      this.getHotelDetail(this.data, this.filterStr);
    },
    //拼接params参数，传入数组和字段名
    spliceFilterParams(arr = [], strField = "") {
      let str = "";
      arr.map(item => {
        if (item) {
          str += `${strField}=${item}&`;
        }
      });
      return str;
    },
    //筛选参数对象
    handleFilter(obj) {
      // console.log(obj);
      let str = `&price_lt=${obj.price_it}&`;
      if (obj.hotellevel_in.length > 0) {
        str += this.spliceFilterParams(obj.hotellevel_in, "hotellevel_in");
      }
      if (obj.hoteltype_in.length > 0) {
        str += this.spliceFilterParams(obj.hoteltype_in, "hoteltype_in");
      }
      if (obj.hotelasset_in.length > 0) {
        str += this.spliceFilterParams(obj.hotelasset_in, "hotelasset_in");
      }
      if (obj.hotelbrand_in.length > 0) {
        str += this.spliceFilterParams(obj.hotelbrand_in, "hotelbrand_in");
      }
      this.filterStr = str.replace(/&$/, "");
      // console.log(str);
      if (this.data.cityId != 0) {
        this.getHotelDetail(this.data, this.filterStr);
      }
    },
    //页码变化
    handleCurrent(val) {
      // console.log(val);
      this.hotellist.length = 1;
      this.getHotelDetail(this.data, this.filterStr, (val - 1) * 10);
    },
    //获取IP地址
    positionsData(arr) {
      // console.log(arr);
      let newArr = [];
      arr.filter(item => {
        newArr.push({
          id: item.id,
          name: item.name,
          location: [item.location.longitude, item.location.latitude]
        });
      });
      this.positions = newArr;
    },
    //开局定位
    positionCity(city) {
      // console.log(city);
      this.$route.query.cityName = city.name;
      const { scenics, id } = city;
      this.scenics = scenics;
      this.loading = true;
      this.$axios
        .get(`/hotels`, {
          params: {
            city: id
          }
        })
        .then(res => {
          const { data, total } = res.data;
          this.hotellist = data;
          this.positionsData(data);
          this.total = total;
          this.loading = false;
        });
    },
    //路由城市
    routerCity() {
      if (this.$route.query.city) {
        this.$axios
          .get("cities", { params: { name: this.$route.query.city } })
          .then(res => {
            const { data } = res.data;
            if (data.length > 0) {
              this.$route.query.cityName = data[0].name;
              const { scenics, id } = data[0];
              this.scenics = scenics;
              this.data.city = id;
              this.getHotelDetail(this.data);
            }
          });
      }
    },
    getHotelDetail(data, filterData = "", sizes = 0) {
      this.loading = true;
      this.$axios
        .get(`/hotels?${filterData}`, {
          params: {
            ...data,
            _start: sizes
          }
        })
        .then(res => {
          // console.log(res);
          const { data, total } = res.data;
          this.hotellist = data;
          this.positionsData(data);
          this.total = total;
          this.loading = false;
        });
    }
  },
  mounted() {
    this.routerCity();
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  .el-breadcrumb {
    padding-bottom: 20px;
  }
  .title-region {
    margin-bottom: 20px;
  }
  .list-filter {
    border: 1px solid #ddd;
    box-shadow: 0 0 5px 0 #999;
    padding: 5px 20px;
    color: #666;
    border-radius: 3px;
  }
  .pageination {
    padding: 20px 10px;
    text-align: right;
  }
}
.icon-icon-1:before {
  font-size: 30px;
  color: red;
}
</style>